<template>
    <div>
        <van-nav-bar title="用户登录" left-text="返回" left-arrow @click-left="goBack" />
        <div class="register-panel">
            <van-field v-model="username" label="用户名" :error-message="usernameErrorMsg" icon="clear" placeholder="请输入用户名" required @click-icon="username=''" />
            <van-field v-model="password" label="密码" :error-message="passwordErrorMsg" placeholder="请输入密码" required />
            <div class="register-button">
                <van-button type="primary" :loading="openLoading" size="large" @click="LoginAction">马上登录</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import url from '@/serviceAPI.config.js'
import {Toast} from 'vant'
export default {
    data(){
        return{
            username:'',
            password:'',
            openLoading:false,  // 是否开启用户的loading
            usernameErrorMsg:'',
            passwordErrorMsg:''
        }
    },
    methods:{
        goBack(){
            this.$router.go(-1)
        },
        axiosLoginUser(){
            this.openLoading = true
            axios({
                url:url.LoginUser,
                method:"post",
                data:{
                    userName:this.username,
                    password:this.password
                }
            })
            .then(response=>{
                if(response.data.code == 200){
                
                }else{
                   
                }
                
            })
            .catch((error)=>{
                Toast.fail("注册失败")
                this.openLoading = false
            })
        },
        LoginAction(){
                this.checkForm() && this.axiosLoginUser()
        },
        checkForm(){
            let isOk = true
            if(this.username.length < 5){
                isOk = false;
                this.usernameErrorMsg = "用户名不能小于5位"
            }else{
                this.usernameErrorMsg = ''
            }
            if(this.password.length<6){
                this.passwordErrorMsg = "密码不能少于6位"
                isOk = false
            }else{
                this.passwordErrorMsg = ""
            }
            return isOk
        }
    }
}
</script>

<style scoped>

</style>